<template>
  <div class="home">
    <!-- 搜索部分 -->
    <van-search v-model="value" placeholder="请输入搜索关键词" />
    <!-- 轮播部分 -->
    <van-swipe class="my-swipe" :autoplay="5000" loop indicator-color="red">
      <van-swipe-item v-for="(item, index) in bannerList" :key="index">
        <van-image :src="item.imgUrl" />
      </van-swipe-item>
    </van-swipe>
    <!-- 活动部分 -->
    <van-grid>
      <van-grid-item icon="new-arrival-o" text="新品推荐" />
      <van-grid-item icon="underway-o" text="限时特惠" />
      <van-grid-item icon="hot-o" text="每日疯抢" />
      <van-grid-item icon="coupon-o" text="领优惠劵" />
    </van-grid>
    <!-- 通知栏 -->
    <van-notice-bar left-icon="volume-o" :scrollable="false">
      <van-swipe
        vertical
        class="notice-swipe"
        :autoplay="3000"
        :show-indicators="false"
      >
        <van-swipe-item v-for="item in notice.records" :key="item.title">{{
          item.title
        }}</van-swipe-item>
      </van-swipe>
    </van-notice-bar>
    <!-- 商品列表 -->
    <div class="produc-list">
      <div style="width: 100%; height: 2rem"></div>
      <div v-for="(tag, index) in tagProd" :key="index">
        <div class="list-title">
          <span class="title">{{ tag.title }}</span
          ><span class="more">查看更多</span>
        </div>
        <van-grid :border="false" :column-num="3">
          <van-grid-item
            @click="gotoDetils(goods)"
            v-for="goods in tag.productDtoList"
            :key="goods.prodId"
          >
            <van-image :src="goods.pic" fit="fill" />
            <div class="produc-info">{{ goods.prodName }}</div>
            <div class="produc-price">￥{{ goods.price }}</div>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
    <div style="height: 4rem"></div>
  </div>
</template>

<script setup  name="home">
import { ref, onMounted } from "vue";
import { banner, noticeList, tagProdList } from "@/api/home.js";
import { useRouter } from "vue-router";
let bannerList = ref([]);
let notice = ref([]);
let tagProd = ref([]);
let router = useRouter();
let value = ref("");
onMounted(() => {
  getAll();
});
//页面数据渲染
async function getAll() {
  try {
    bannerList.value = await banner();
    notice.value = await noticeList();
    console.log(notice.value, "897654");

    tagProd.value = await tagProdList();
    console.log(bannerList.value);
  } catch (err) {
    console.log("失败", err);
  }
}

//跳转详情页
function gotoDetils(val) {
  router.push({
    path: "/prodInfo",
    query: {
      ids: val.prodId,
    },
  });
}
</script>
<style lang="scss" scoped>
.my-swipe .van-swipe-item {
  .van-image {
    height: 256px;
  }
}

.notice-swipe {
  height: 40px;
  line-height: 40px;
}

.van-grid {
  .van-grid-item {
    .van-grid-item__content {
      .produc-info {
        font-size: 0.5rem;
        padding: 0.1rem;
        font-weight: 500;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .produc-price {
        color: red;
        text-align: left;
        width: 100%;
        margin-left: 1rem;
      }
    }
  }
}
.list-title {
  text-align: center;
  .title {
    display: inline-block;
    text-align: left;
    width: 50%;
    font-weight: 600;
    padding-left: 1rem;
  }

  .more {
    display: inline-block;
    text-align: right;
    width: 40%;
    font-size: 12px;
    line-height: 12px;
    padding-right: 1rem;
  }
}
</style>
